import { Datum, Pie, PieConfig } from '@ant-design/charts';
import { useEffect, useState } from 'react';
import { Card, theme } from 'antd';
import fetchDevStatusStatisticsData from '../mockData/devStatusStatisticsData';
import { round } from 'mathjs';
type DataType = {
  status: string;
  value: number;
};

type Props = {
  type: 'service' | 'hardware' | 'resource' | 'network';
};

const typeMap = {
  service: '设备服务状态统计',
  hardware: '设备硬件状态统计',
  resource: '设备资源状态统计',
  network: '设备网络状态统计',
};

const DevStatusStatistics: React.FC<Props> = ({ type }) => {
  const { useToken } = theme;
  const { token } = useToken();
  const [data, setData] = useState<DataType[]>([]);
  useEffect(() => {
    const data = fetchDevStatusStatisticsData(type);
    setData(data);
  }, []);

  const config: PieConfig = {
    appendPadding: 16,
    data,
    angleField: 'value',
    colorField: 'status',
    radius: 1,
    innerRadius: 0.64,
    meta: {
      value: {
        formatter: (v) => `${v}`,
      },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      style: {
        textAlign: 'center',
      },
      autoRotate: false,
      content: '{value}',
    },
    statistic: {
      title: {
        content: '正常比',
        style: {
          fontSize: `${token.fontSizeLG}px`,
        },
      },
      content: {
        content: `${round(
          ((data.find((item) => item.status === '正常')?.value || 0) /
            data.reduce((r, d) => r + d.value, 0)) *
            100,
          2,
        )}%`,
        style: {
          marginTop: '5px',
          fontSize: `${token.fontSizeXL}px`,
        },
      },
    },
    tooltip: {
      formatter: (datum: Datum) => {
        return { name: datum.status, value: datum.value + '台' };
      },
    },
    legend: {
      layout: 'horizontal',
      position: 'bottom',
      itemSpacing: 0,
    },
    interactions: [{ type: 'legend-filter', enable: false }],
  };
  return (
    <Card title={typeMap[type]} bordered={false} size="small">
      <Pie {...config} />
    </Card>
  );
};
export default DevStatusStatistics;
